<!--
 * @Descripttion: 
 * @Author: wult
 * @Date: 2021-04-02 14:18:55
 * @LastEditTime: 2021-04-08 17:18:57
-->
<template>
  <div class="task-container">
    <div class="block">
      <span class="demonstration" style="width: 100px">必做备课任务： </span>
      <el-tag
        style="margin-right: 10px; cursor: pointer"
        v-for="(item, index) in dictionaryForConfig"
        :key="index"
        :type="item.isActive ? '' : 'info'"
        @click="chooseTag(item)"
      >
        {{ item.label }}
      </el-tag>
    </div>

    <div class="block">
      <span class="demonstration" style="width: 100px">直接上课权限： </span>
      <el-switch v-model="directTeaching" @change="changeDisabled"></el-switch>
      <span class="active-text description">无需备课，可直接去上课</span>
    </div>

    <div class="block">
      <span class="demonstration" style="width: 100px">说明： </span>
      <span class="active-text"
        >教师备课时，完成必做备课任务后才可以提交备课</span
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Ref, ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";

export default {
  props: {
    config: {
      type: Object as any,
      default: () => ({}),
    },
  },
  setup(props) {
    onMounted(() => {
      dictionaryForConfig[0].isActive = props.config.teachPlan == 1;
      dictionaryForConfig[1].isActive = props.config.reviewVideo == 1;
      directTeaching.value = props.config.directTeaching === 1;
      changeDisabled(directTeaching.value);
    });
    let directTeaching: Ref<boolean> = ref(false);
    let isDisabled: Ref<boolean> = ref(false);
    /** tags 标签字典 */
    let dictionaryForConfig = reactive([
      {
        label: "教案",
        value: "teachPlan",
        isActive: false,
      },
      {
        label: "说课视频",
        value: "reviewVideo",
        isActive: false,
      },
    ]);
    const chooseTag = (item) => {
      item.isActive = !item.isActive;
      directTeaching.value = false
    };
    const changeDisabled = (data) => {
      isDisabled.value = data;
      if (data) {
        dictionaryForConfig.forEach((ele) => {
          ele.isActive = false;
        });
      }
    };
    const save = (resolve, reject) => {
      const arr = dictionaryForConfig.map((ele) => {
        if (ele.isActive) return ele.value;
      });
      const params = {
        teachPlan: arr.includes("teachPlan") ? 1 : 0,
        reviewVideo: arr.includes("reviewVideo") ? 1 : 0,
        directTeaching: directTeaching.value ? 1 : 0,
      };
      resolve(params);
    };
    return {
      dictionaryForConfig,
      chooseTag,
      changeDisabled,
      directTeaching,
      save,
      isDisabled,
    };
  },
};
</script>
<style scoped lang="scss">
.task-container {
  .block {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  .description {
    margin-left: 10px;
  }
  .active-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
</style>